<template>
  <div >
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home/statistics' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form  :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="订单号">
        <el-input v-model="queryInfo.order_no" placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select clearable v-model="queryInfo.status" placeholder="选择订单状态">
          <el-option label="已下单" :value="1"></el-option>
          <el-option label="已支付" :value="2"></el-option>
          <el-option label="已发货" :value="3"></el-option>
          <el-option label="已收货" :value="4"></el-option>
          <el-option label="已过期" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchGood">查询</el-button>
      </el-form-item>
    </el-form>
    <el-main>
      <el-table :data="orderList" border  v-loading="loading"  >
        <el-table-column align="center" type="index" label="#" width="80">
        </el-table-column>
        <el-table-column align="center" prop="order_no" label="订单号" width="200">
        </el-table-column>
        <el-table-column align="center" prop="user_id" label="创建者" width="80">
        </el-table-column>
        <el-table-column align="center" prop="amount" label="总价" width="100">
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status ===1">已下单</el-tag>
            <el-tag type="success" v-if="scope.row.status ===2">已支付</el-tag>
            <el-tag type="info" v-if="scope.row.status ===3">已发货</el-tag>
            <el-tag type="warning" v-if="scope.row.status ===4">已收货</el-tag>
            <el-tag type="danger" v-if="scope.row.status ===5">已过期</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="快递类型" width="95">
          <template slot-scope="scope">
            <el-tag v-if="[3,4].includes(scope.row.status) && scope.row.express_type === 'SF'">顺丰速递</el-tag>
            <el-tag v-else-if="[3,4].includes(scope.row.status) && scope.row.express_type === 'YTO'">圆通速递 </el-tag>
            <el-tag v-else-if="[3,4].includes(scope.row.status) && scope.row.express_type === 'YD'">韵达速递 </el-tag>
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="支付方式" width="80">
          <template slot-scope="scope">
             <el-tag v-if="[2,3,4].includes(scope.row.status)">{{ scope.row.pay_type }}</el-tag>
             <span v-else>暂无</span>
          </template>
        </el-table-column>


        <el-table-column align="center"  label="支付流水号" width="255">
          <template slot-scope="scope">
            <span v-if="[2,3,4].includes(scope.row.status)">{{ scope.row.trade_no }}</span>
            <span v-else>暂无相关支付流水号</span>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="updated_at" label="更新时间" width="160">
        </el-table-column>
        <el-table-column align="center"  label="操作" width="92">
          <template slot-scope="scope">
            <el-button @click="deliverGoods(scope.row.id)" v-if="scope.row.status === 2" size="mini" type="primary" round>发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="margin-top: 20px"
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="pagination.total">
      </el-pagination>
    </el-main>

    <!--   发货弹窗-->
    <el-dialog center title="订单发货" width="30%" :visible.sync="dialogFormVisible">
      <el-form :model="deliver">
        <el-form-item label="快递类型">
          <el-select v-model="deliver.cate" placeholder="请选择快递类型">
            <el-option label="顺丰速递" value="SF"></el-option>
            <el-option label="圆通快递" value="YTO"></el-option>
            <el-option label="韵达快递" value="YD"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDeliver">确 定</el-button>
      </div>
    </el-dialog>
  </div>



</template>

<script>
import {getOrderList,deliverOrder} from "../../api/order";
export default {
  name: "Statistics",
  data(){
    return{
      orderList:[],
      pagination:{},
      queryInfo:{
        current:1,
        order_no:'',
        status:null
      },
      loading:false,
      dialogFormVisible:false,
      deliver:{
        cate:''
      },
      orderId:null
    }
  },
  mounted() {
    this.getOrderListData()
  },
  methods:{
    async getOrderListData(){
      this.loading = true
      const res = await getOrderList(this.queryInfo)
      if(res && res.status === 200){
        this.loading = false
        this.orderList = res.data.data
        this.pagination = res.data.meta.pagination
      }
      console.log(res);
    },
    //翻页
    handleCurrentChange(val){
      console.log(val);
      this.queryInfo.current = val
      this.getOrderListData()
    },
    searchGood(){
      this.queryInfo.current = 1
      this.getOrderListData()
    },
    // 发货
    deliverGoods(id){
      this.dialogFormVisible = true
      this.orderId = id
    },
    // 确认发货
    async confirmDeliver(){
      const res = await deliverOrder(this.orderId,this.deliver.cate)
      if(res && res.status === 204){
        this.dialogFormVisible = false
        this.$message.success('发货成功')
        this.deliver.cate = ''
        await this.getOrderListData()
      }
      // console.log(res);
    }
  }
}
</script>

<style scoped lang="css">
::v-deep.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 40px;
}
.el-form{
  padding:0 0 0 20px;
  margin-top: 20px;
}
</style>